<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 头部 -->
			<cu-custom bgColor="bg-rgb" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">{{ title[type] }}质检保存</block>
			</cu-custom>
			<!-- 数据列表 -->
			<form v-if="hasGrade" @submit="handleSubmit">
				<view class="cu-form-group margin-xs radius">
					<view class="title">产品名称：{{objMsg.mechanismName}}</view>
					<view class="">线别：{{objMsg.lineType}}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">生产任务单：</view>
					<label>{{objMsg.commandbillCode}}</label>
				</view>
				<view class="cu-form-group">
					<view class="title">BOM：</view>
					<label>{{objMsg.mechanismCode}}</label>
				</view>
				<view class="cu-form-group">
					<view class="title">产品名称/顾客：</view>
					<input placeholder="请输入产品名称/顾客" name="customer"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">状态号：</view>
					<input placeholder="请输入状态号" name="statusNum"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">数量：</view>
					<input placeholder="请输入数量" name="num"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">类型：</view>
					<view>{{title[type]}}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">PCB板：</view>
					<radio-group name="project01" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project01', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project01" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">物料：</view>
					<radio-group name="project02" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project02', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project02" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">BOM表：</view>
					<radio-group name="project03" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project03', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project03" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">焊接效果：</view>
					<radio-group name="project04" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project04', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project04" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">程序烧写：</view>
					<radio-group name="project05" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project05', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project05" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">功能检测：</view>
					<radio-group name="project06" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project06', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project06" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">耐压绝缘：</view>
					<radio-group name="project07" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project07', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project07" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">限流值：</view>
					<radio-group name="project08" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project08', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project08" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">欠压值：</view>
					<radio-group name="project09" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project09', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project09" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">外观尺寸：</view>
					<radio-group name="project10" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project10', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project10" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">线束：</view>
					<radio-group name="project11" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project11', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project11" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">密封效果：</view>
					<radio-group name="project12" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project12', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project12" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">铭牌：</view>
					<radio-group name="project13" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project13', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project13" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">刻字：</view>
					<radio-group name="project14" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project14', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project14" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">包装：</view>
					<radio-group name="project15" class="flex"
						@change="radioChange('resultRadioItems', 'checked.project15', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.project15" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>

				<view class="cu-form-group">
					<view class="title">其它（请注明）：</view>
					<input placeholder="请输入备注" name="remarks"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">判断结果：</view>
					<radio-group name="decide" class="flex"
						@change="radioChange('resultRadios', 'checked.decide', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs"
							v-for="(item, index) in resultRadios" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === checked.decide" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="button-sub">
					<button form-type="submit" >保存</button>
				</view>
				<!-- <view class="cu-form-group align-start" style="padding-top: 10px;">
					<view class="title">拍照上传</view>
					<button @tap="takephoto()" class="cu-btn bg-rgb shadow lg" style="width: 100px;">拍照上传</button>
				</view> -->
				<!-- <view class="picture-box">
					<image :src="item" v-for="item in imglist"></image>
				</view> -->
				<!-- <view class="cu-form-group">
					<view class="title">判断结果：</view>
					<radio-group name="decide" class="flex basis-lg" @change="radioChange('resultRadioItems', 'resultRadioCurrent', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs" v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === resultRadioCurrent" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view> -->

				<!-- <view class="btns" v-if="list.length > 0">
					<button class="cu-btn bg-rgb lg" @click="onSubmitPrin">保存</button>
				</view> -->
			</form>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: {
					type: '',
					project01: '',
					project02: '',
					project03: '',
					project04: '',
					project05: '',
					project06: '',
					project07: '',
					project08: '',
					project09: '',
					project10: '',
					project11: '',
					project12: '',
					project13: '',
					project14: '',
					project15: '',
					decide: '',

				},
				imglist: [],
				inspectGrade: "",
				materielCode: '',
				list: [],
				preservationList: [],
				objMsg: {},
				radioItems: [{
						value: '有铅',
						name: '有铅'
					},
					{
						value: '无铅',
						name: '无铅'
					},
					{
						value: '红胶',
						name: '红胶'
					}
				],
				radioCurrent: -1,
				resultRadios: [{
						value: 'OK',
						name: 'OK'
					},
					{
						value: 'NG',
						name: 'NG'
					}
				],
				resultRadioItems: [{
						value: '1',
						name: 'OK'
					},
					{
						value: '0',
						name: 'NG'
					}
				],
				resultRadioCurrent: -1,
				hasGrade: false,
				type: '1',
				title: {
					'1': '首件',
					'2': '巡件',
					'3': '末件',
				}
			}
		},
		onLoad(e) {
			this.objMsg = uni.getStorageSync('firstPieceQualityInspection');
			console.log(this.objMsg)
			this.type = this.$Route.query.type
			this.qualityTesting()
		},
		methods: {
			takephoto() {
				let that = this
				let maxUpload = 1
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认1
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: (res) => {
						console.log(res);
						const tempFilePaths = res.tempFilePaths
						tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: that.$http.config.baseUrl + 'sys/common/upload',
								filePath: item,
								method: 'POST',
								name: 'file',
								header: {
									'X-Access-Token': uni.getStorageSync('Access-Token')
								},
								success: function(uploadFileRes) {
									that.imglist = []
									that.modal.show({
										type: 'success',
										content: '上传成功!'
									})
									let result = JSON.parse(uploadFileRes.data)
									if (result.success) {
										that.imglist = that.imglist.concat([result
											.message
										]); //concat追加到数组
									} else {
										that.modal.show({
											type: 'error',
											content: result.message
										})
									}
								}
							});
						})
					}
				});
			},
			checkChange(item, evt) {
				item.insLog = evt.target.value
			},
			radioChange: function(type, cur, evt) {
				for (let i = 0; i < this[type].length; i++) {
					if (this[type][i].value === evt.target.value) {
						this.cur = i;
						break;
					}
				}
			},
			checkboxChange: function(e) {
				var items = this.checkBoxItems,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			qualityTesting() {
				uni.showLoading({
					mask: true,
					title: '加载中.....'
				})
				let data = {
					inspectGrade: '201',
					materielCode: this.objMsg.mechanismCode
				}
				this.$http.get('inspect/mesMaterielCheckprojrct/getByGrade', {
					params: data
				}).then(res => {
					uni.hideLoading()
					if (res.data.success) {
						this.list = res.data.result
						if (this.list.length > 0) {
							this.hasGrade = true
							for (let i = 0; i < this.list.length; i++) {
								let data = {
									insLog: '',
									badCauses: '',
									insItem: this.list[i].projectName,
									// projectCode:this.list[i].projectCode
								}
								this.preservationList.push(data)
							}
							console.log(1111, this.preservationList)
						}
					} else {
						// this.$tip.error(res.data.message)
						this.modal.show({
							type: 'error',
							content: res.data.message
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					}
				})
			},
			handleSubmit(e) {
				let {
					customer,
					statusNum,
					num,
					project01,
					project02,
					project03,
					project04,
					project05,
					project06,
					project07,
					project08,
					project09,
					project10,
					project11,
					project12,
					project13,
					project14,
					project15,
					remarks,
					decide
				} = e.detail.value
				let obj = {
					commandbillCode: this.objMsg.commandbillCode,
					produceId: this.objMsg.commandbillCode,
					type: this.title[this.type],
					...e.detail.value
				}
				console.log(111, obj)
				if (customer.trim().length === 0) {
					this.modal.show({
						type: 'error',
						content: '请输入产品名称/顾客'
					})
					return
				}
				if (statusNum.trim().length === 0) {
					this.modal.show({
						type: 'error',
						content: '请输入状态号'
					})
					return
				}
				if (num.trim().length === 0) {
					this.modal.show({
						type: 'error',
						content: '请输入数量'
					})
					return
				}
				if (project01.trim().length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检PCB板'
					})
					return
				}
				if (project02.trim().length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检物料'
					})
					return
				}
				if (project03.trim().length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检BOM表'
					})
					return
				}
				if (project04.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检焊接效果'
					})
					return
				}
				if (project05.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检程序烧写'
					})
					return
				}
				if (project06.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检功能检测'
					})
					return
				}
				if (project07.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检耐压绝缘'
					})
					return
				}
				if (project08.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检限流值'
					})
					return
				}
				if (project09.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检欠压值'
					})
					return
				}
				if (project10.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检外观尺寸'
					})
					return
				}
				if (project11.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检线束'
					})
					return
				}
				if (project12.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检密封效果'
					})
					return
				}
				if (project13.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检铭牌'
					})
					return
				}
				if (project14.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检刻字'
					})
					return
				}
				if (project15.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请质检包装'
					})
					return
				}

				if (decide.length === 0) {
					this.modal.show({
						type: 'error',
						content: '请选择判断结果'
					})
					return
				}

				uni.showLoading({
					mask: true,
					title: '加载中.....'
				})
				// let params = {
				// 	query1: this.imglist[0],
				// 	lineType,
				// 	productNum: commandbillCode,
				// 	productName: mechanismName,
				// 	productBom: mechanismCode,
				// 	firstPieceSmtlogs: this.preservationList,
				// 	...e.detail.value
				// }
				this.$http.post('inspect/zsFirstPatrolRecord/add', obj).then(res => {
					uni.hideLoading()
					if (res.data.success) {
						this.modal.show({
							type: 'success',
							content: res.data.message
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					} else {
						this.modal.show({
							type: 'error',
							content: res.data.message
						})
					}
				})
			},
			onSubmitPrin() {
				uni.showModal({
					title: '提示',
					content: '本次质检是否合格',
					cancelText: '不合格',
					confirmText: '合格',
					success: res => {
						if (res.confirm) {
							uni.showModal({
								title: '保存首件质检',
								content: '是否要保存本次质检合格记录？',
								cancelText: '取消',
								confirmText: '确定',
								success: res => {
									if (res.confirm) {
										uni.showLoading({
											mask: true,
											title: '加载中.....'
										})
										let obj = {
											inspectGrade: this.objMsg.produceGrade,
											materielCode: this.objMsg.mechanismCode,
											materielName: this.objMsg.mechanismName,
											relatedCode: this.objMsg.id,
											inspectQualify: '是',
											mesBadnessInfoList: []
										}
										for (let i = 0; i < this.preservationList.length; i++) {
											let data = {
												inspectProject: this.preservationList[i].code +
													'-' + this.preservationList[i].name,
												inspectResult: this.preservationList[i].txt,
												query2: this.preservationList[i].num
											}
											obj.mesBadnessInfoList.push(data);
										}
										this.$http.post('inspect/mesBadnessHandle/appAdd', obj)
											.then(res => {
												uni.hideLoading()
												if (res.data.success) {
													// this.$tip.success(res.data.message);
													this.modal.show({
														type: 'success',
														content: res.data.message
													})
													setTimeout(function() {
														uni.navigateBack({
															delta: 1
														})
													}, 1000);
												} else {
													// this.$tip.error(res.data.message)
													this.modal.show({
														type: 'error',
														content: res.data.message
													})
												}
											})
									}
								}
							})
						} else {
							uni.showModal({
								title: '保存首件质检',
								content: '是否要保存本次质检不合格记录？',
								cancelText: '取消',
								confirmText: '确定',
								success: res => {
									if (res.confirm) {
										uni.showLoading({
											mask: true,
											title: '加载中.....'
										})
										let obj = {
											inspectGrade: this.objMsg.produceGrade,
											materielCode: this.objMsg.mechanismCode,
											materielName: this.objMsg.mechanismName,
											relatedCode: this.objMsg.id,
											inspectQualify: '否',
											mesBadnessInfoList: []
										}
										for (let i = 0; i < this.preservationList.length; i++) {
											let data = {
												inspectProject: this.preservationList[i].code +
													'-' + this.preservationList[i].name,
												inspectResult: this.preservationList[i].txt,
												query2: this.preservationList[i].num
											}
											obj.mesBadnessInfoList.push(data);
										}
										this.$http.post('inspect/mesBadnessHandle/appAdd', obj)
											.then(res => {
												uni.hideLoading()
												if (res.data.success) {
													// this.$tip.success(res.data.message);
													this.modal.show({
														type: 'success',
														content: res.data.message
													})
													setTimeout(function() {
														uni.navigateBack({
															delta: 1
														})
													}, 1000);
												} else {
													// this.$tip.error(res.data.message)
													this.modal.show({
														type: 'error',
														content: res.data.message
													})
												}
											})
									}
								}
							})
						}
					}
				})
			},
		},
	}
</script>

<style lang="less">
	.page {
		// padding-bottom: 80rpx;
	}

	.borderTop {
		border-top: 0.5px solid #eee;
	}

	.border {
		border: 0.5px solid #eee;
	}

	.checkBoxWrap.cu-form-group+.cu-form-group {
		border: 0;
	}

	.btns {
		position: fixed;
		z-index: 999;
		background: white;
		bottom: 0;
		height: 80rpx;
		line-height: 100rpx;
	}

	.cu-btn {
		width: 650rpx;
		margin-left: 50rpx;
	}

	// .card {
	// 	margin: 30rpx;
	// 	box-shadow: 0px 0px 5rpx 2rpx rgba(0, 0, 0, 0.1);
	// 	border-radius: 10rpx;
	// 	padding: 30rpx;
	// 	background-color: white;
	// }

	// .card .top {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	border-bottom: 1rpx solid #F0F0F0;
	// 	padding-bottom: 20rpx;
	// 	font-weight: bold;
	// }

	// .card .bottom .box {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	padding: 20rpx 0;
	// }

	// .card .bottom .box .lable {
	// 	width: 25%;
	// }

	// .card .bottom .box .content {
	// 	width: 74%;
	// 	text-align: right;
	// }
	// .boxs{
	// 	display: flex;
	// 	justify-content: space-between;
	// 	padding: 20rpx 0;
	// 	align-items: center;
	// }
	// // .boxs .title{
	// // 	font-weight: bold;
	// // 	padding: 10rpx;
	// // 	border-radius: 10rpx;
	// // 	color: white;;
	// // }
	// .boxs input {
	// 	border: 2rpx solid red;
	// 	height: 60rpx;
	// 	padding: 10rpx;
	// 	border-radius: 10rpx;
	// 	font-size: 20rpx;
	// 	color: red;
	// }
	// .boxs input .input-placeholder{
	// 	color: red;
	// }
	// uni-textarea{
	// 	border: 2rpx solid #F0F0F0;
	// 	padding: 10rpx;
	// 	border-radius: 10rpx;
	// 	font-size: 20rpx;
	// }
	// .list{
	// 	margin-bottom: 120rpx;
	// }
	// .btns{
	// 	position: fixed;
	// 	z-index: 999;
	// 	background: white;
	// 	bottom: 0;
	// 	height: 100rpx;
	// 	line-height: 100rpx;
	// }
	// .cu-btn{
	// 	width: 650rpx;
	// 	margin-left: 50rpx;
	// }
	.picture-box {
		width: 100%;
		margin-top: 10px;

		.picture {
			width: 100%;
			height: 200px;
			margin-bottom: 10px;
		}
	}

	.button-sub {
		padding: 30rpx 0;

		button {
			color: #fff;
			background-color: #003698;
		}
	}
</style>
